<template>
<el-form ref="ruleFormRef" style="max-width: 600px" :model="ruleForm" :rules="rules" label-width="auto"
	    class="demo-ruleForm" :size="formSize" status-icon>
	    <el-form-item label="客户名称" prop="CustomerName">
	    		<el-input v-model="ruleForm.CustomerName" />
	    	</el-form-item>
	    	<el-form-item label="联络员" prop="Linkman">
	    		<el-input v-model="ruleForm.Linkman" />
	    	</el-form-item>
	    	<el-form-item label="描述" prop="Desc">
	    		<el-input v-model="ruleForm.Desc" autocomplete="off" />
	    	</el-form-item>		
	    	
			<el-form-item label="电话" prop="Tel">
				<el-input v-model="ruleForm.Tel" autocomplete="off" />
			</el-form-item>	
				
			<el-form-item label="客户类型" prop="customerType">
					<DictSelect v-model="ruleForm.CustomerType" type-name="客户类型" style="width: 200px;"/>
			</el-form-item>
	
	    
	    <el-form-item>
	        <el-button type="primary" @click="submitForm(ruleFormRef)">
	            保存
	        </el-button>
	        <el-button @click="resetForm(ruleFormRef)">重置</el-button>
	    </el-form-item>
	</el-form>
	
</template>

<script setup lang="ts">
	    import { reactive, ref, onMounted } from 'vue'
		import type { ComponentSize, FormInstance, FormRules } from 'element-plus'
		import { ElNotification } from 'element-plus'
		import DictSelect from '../../components/DictSelect.vue'
		import CustApi from "../../api/Customerapi"
		
		const props = defineProps({
		    Id: {
				type:Number,
				required:true   //必填
			}
		});
		const emit = defineEmits(['onSave'])
		
		interface RuleForm {
		     CustomerName: string
		     Linkman: string
			 Desc:string
			 Tel:string
			 CustomerType:number|null
		}
		
		const formSize = ref<ComponentSize>('default')
		const ruleFormRef = ref<FormInstance>()
		const ruleForm = ref<RuleForm>({
				CustomerName: '',
				Linkman: '',
				Desc: '',
				Tel: '',
				CustomerType:null,
		})
		
		const parentMenu = ref<any>([])
		
		
		const getData = () => {
		    CustApi.get(props.Id!).then(res => {
		        ruleForm.value = res.data
		    })
		}
		onMounted(() => {
		    getData();
		})
		const submitForm = async (formEl: FormInstance | undefined) => {
		    if (!formEl) return
		    await formEl.validate((valid, fields) => {
		        if (valid) {
		            console.log("ruleForm.data", ruleForm.value)
		
		            CustApi.put(props.Id,ruleForm.value).then(res => {
		                console.log("rws",res)
		                if (res.code == 1) {
		                    ElNotification({
		                        title: 'Success',
		                        message: '修改成功',
		                        type: 'success',
		                        duration: 800,
		                        onClose: () => {
		                            emit("onSave", true)
		                        }
		                    })
		                } else {
		                    ElNotification({
		                        title: 'Error',
		                        message: '失败',
		                        type: 'error',
		                        duration: 800,
		                    })
		                }
		            }).catch(err => {
		                ElNotification({
		                    title: 'Error',
		                    message: '失败',
		                    type: 'error',
		                    duration: 800,
		                })
		                console.log("err",err)
		            })
		        } else {
		            console.log('error submit!', fields)
		        }
		    })
		}
		
		const resetForm = (formEl: FormInstance | undefined) => {
		    if (!formEl) return
		    formEl.resetFields()
		}
		
</script>

<style>
</style>